<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>online</title>

    <link rel="stylesheet" href="css/py.css" type="text/css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/underscore.js"></script>
    <script src="js/online.js"></script>
    
    <!-- 引入核心js和css -->
    <script type="text/javascript" src="codemirror/lib/codemirror.js"></script>
    <link rel="stylesheet" href="codemirror/lib/codemirror.css">
    
    <!-- 使用主题 -->
    <link href="codemirror/theme/dracula.css" rel="stylesheet" type="text/css">
    
    <script src="codemirror/mode/python/python.js"></script>
    
    <!-- 支持搜索 -->
    <script src="codemirror/addon/selection/active-line.js"></script>
    <script src="codemirror/addon/search/search.js"></script>
    <script src="codemirror/addon/search/searchcursor.js"></script>
    <script src="codemirror/addon/search/jump-to-line.js"></script>

    <!--支持代码折叠-->
    <link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css"/>
    <script src="codemirror/addon/fold/foldcode.js"></script>
    <script src="codemirror/addon/fold/foldgutter.js"></script>
    <script src="codemirror/addon/fold/brace-fold.js"></script>
    <script src="codemirror/addon/fold/indent-fold.js"></script>
    <script src="codemirror/addon/fold/comment-fold.js"></script>
    
    <!--全屏模式-->
    <link rel="stylesheet" href="codemirror/addon/display/fullscreen.css">
    <script src="codemirror/addon/display/fullscreen.js"></script>
    
    <!--括号匹配-->
    <script src="codemirror/addon/edit/matchbrackets.js"></script>
    <script src="codemirror/addon/edit/closebrackets.js"></script>
    
    <!--自动补全-->
    <link rel="stylesheet" href="codemirror/addon/hint/show-hint.css">
    <script src="codemirror/addon/hint/show-hint.js"></script>
    <script src="codemirror/addon/hint/anyword-hint.js"></script>
</head>
<body>
    <textarea id="code" name="code">print('hi')</textarea>
    <div>
        <button type="button" class="uk-button uk-button-primary" onclick="execute_python('code',this)">运行</button>
    </div>
</body>
<script type="text/javascript">
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode:"text/x-python",
        lineNumbers: true,     // 显示行数
        indentUnit: 4,         // 缩进单位为4
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true,   // 括号匹配
        autoCloseBrackets: true,//自动关闭括号
        lineWrapping: true,    // 自动换行
        theme: 'dracula',      // 使用模版
        showHint:true,
        extraKeys: {"Atl-Space":"autocomplete","Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
    });
    // 编辑器按键监听
    editor.on("keypress", function() {
        // 显示智能提示
        editor.showHint(); // 注意，注释了CodeMirror库addon中show-hint.js第132行的代码（阻止了代码补全，同时提供智能提示）
    });
</script>
</html>